<template>
	<div class="coachconfirm-wrap">
    <div v-title style="display: none">信息确认</div>
		<div class="coachconfirm-header">
			<img class="img1" :src="'http://cj.lightway.cc/media/' + this.coachinfo.img"/>
			<div class="coach-info">
    		<p>{{ this.coachinfo.name }}</p>
    		<p class="star">
      		<span v-for="(item,index) in this.starclass">
            <span :class="item"></span>
          </span>
      		{{ this.coachinfo.average_grade + '分' }}
    		</p>
      </div>
		</div>
		<div class="coachconfirm-mark">
			<div class="mark">
				<span>服务态度:<span>{{ this.coachinfo.serve_grade }}</span></span>
        <span>教学质量:<span>{{ this.coachinfo.teaching_grade }}</span></span>
        <span>车容车况:<span>{{ this.coachinfo.car_grade }}</span></span>
			</div>
		</div>

		<div class="confirm-content">
			<div class="title">
				<span class="icona"></span>
				<span class="span1">预约日期：<span>{{ date(this.coachinfo.date) }}</span> <span>{{ week(this.coachinfo.date) }}</span></span>
			</div>
			<div v-for="(item,index) in this.orderinfo">
				<div class="confirm-flex">
					<span>{{ time(item.start_time) + '~' + time(item.end_time) }}</span>
					<span>{{ '￥' + item.price }}</span>
				</div>
      </div>
			<div class="price-all">					
				<span class="spanA"><span class="spanB">共计<span>{{ times }}</span>个小时	小计：</span>{{ '￥' + this.price }}</span>
			</div>		
		</div>

		<div class="confirm-content">
			<div class="title">
				<span class="iconb"></span>
				<span class="span1">培训详情</span>
			</div>
			<div>
				<div class="confirms">
					<span>培训内容</span>
					<select class="selectc" v-model="sub">
            <option v-for="(item,index) in this.carinfo.subject" :value ="item">{{ item }}</option>
          </select>
          <span class="down"></span>
				</div>

        <div class="confirms">
          <span>培训车型</span>
          <select class="selectc" v-model="car">
            <option v-for="(item,index) in this.carinfo.car_type" :value ="item">{{ item }}</option>
          </select>
          <span class="down"></span>
        </div>
			</div>
		</div>

    <div class="confirm-content">
      <div class="title">
        <span class="iconc"></span>
        <span class="span1">培训地点</span>
      </div>
      <div>
        <div class="confirms">
          <span>{{ this.coachinfo.area + ' ' + this.coachinfo.location }}</span>
        </div>
      </div>
    </div>
		<div class="confirm-content">
			<div class="title">
				<span class="icond"></span>
				<span class="span1">使用优惠</span>
			</div>
			<div>
				<div class="confirms">
					<span>无</span>
					<span class="mores"></span>			
				</div>
			</div>
		</div>
    <div class="confirm-fix"></div>
		<div class="coachconfirm-footer">
  		<div class="footer-confirm">
    		<span class="span-sum">合计：<span>{{ '￥' + this.price }}</span></span>
    		<span class="span-order" @click="submitconfirm">提交订单</span>
  		</div>
    </div>
  <!--  <notification notification="支付异常，请重新支付或联系客服。" title="提示" isWithdraw="singleCallback" isrouter='/orderdetail/' :query='order' v-show="tooltip" v-on:gettooltip="showtooltip"></notification> -->

	</div>
</template>
<script type="text/ecmascript-6">
import notification from 'components/notification/notification';
  export default {
    props: {
    },
    data() {
      return {
        coachinfo: [],
        orderinfo: [],
        carinfo: [],
        price: 0,
        sub: '',
        car: '',
        times: 0,
        schoolID: '',
        phone: window.localStorage.cphone,
        weekArray: [ '周日', '周一', '周二', '周三', '周四', '周五', '周六' ],
        starclass: []
      };
    },
    created() {
      let courseid = this.$route.query.course_id;
      let coachid = this.$route.query.coach_id;
      let date = this.$route.query.date;
      this.$http.post('api/course/checkorder/', {course_id: courseid, coach_id: coachid, date: date, mobile: window.localStorage.cphone}).then(response => {
        this.coachinfo = response.body.coach_data;
        this.orderinfo = response.body.data;
        this.carinfo = response.body.order_data;
        for (let i in this.orderinfo) {
          this.price += parseFloat(this.orderinfo[i].price);
          this.times += parseInt(this.hour(this.orderinfo[i].end_time)) - parseInt(this.hour(this.orderinfo[i].start_time));
        }
        this.sub = this.carinfo.subject[0];
        this.car = this.carinfo.car_type[0];
        this.schoolID = this.coachinfo.school_id;
        this.phone = window.localStorage.cphone;
        this.mark(this.coachinfo.average_grade);
      });
    },
/*  watch: {
      getresponse: function(newdata, olddata) {
        if (newdata === 'ok') {
          this.submitconfirm();
        }
      }
    },
    computed: {
      getresponse() {
        return this.notice.response;
      }
    }, */
    methods: {
    /*  showtooltip(msg) {
        this.tooltip = msg.tooltip;
      }, */
      mark: function(value) {
        let star = parseInt(value / 2);
        let remainder = value % 2;
        if (remainder >= 1) {
          star = star + 1;
        }
        for (let i = 0; i < 5; i++) {
          if (i < star) {
            this.starclass.push('star-icon');
          } else {
            this.starclass.push('star-grey');
          }
        }
      },
      date: function(value) {
        return value.substr(5);
      },
      week: function(value) {
        let weeks = value.split('-');
        let weekday = new Date(weeks[0], parseInt(weeks[1] - 1), weeks[2]);
        return this.weekArray[weekday.getDay()];
      },
      time: function(value) {
        return value.substr(0, 5);
      },
      hour: function(value) {
        return value.substr(0, 2);
      },
      submitconfirm() {
      this.$http.post('api/pay/paymentsorder/', {school_id: this.schoolID, course_id: this.$route.query.course_id, mobile: this.phone, coach_id: this.$route.query.coach_id, date: this.$route.query.date, subject: this.sub, car_type: this.car, openid: window.localStorage.openid}).then(response => {
          var order = response.body.order_num;
          var student = response.body.is_student;
          if (student === true) {
            this.$router.replace({path: '/#myself'});
            this.$router.push({path: '/orderdetail/', query: {order_id: order}});
          } else {
            this.$http.post('api/pay/paymentsbyordernum/', {order_num: order, op_id: window.localStorage.openid}).then(response => {
              var data = response.body.data;
              function onBridgeReady() {
                 window.WeixinJSBridge.invoke(
                     'getBrandWCPayRequest', {
                        'appId': data.appId,
                        'timeStamp': data.timeStamp,
                        'nonceStr': data.nonceStr,
                        'package': data.package,
                        'signType': data.signType,
                        'paySign': data.paySign
                     },
                     function(res) {
                        // window.location.replace('/finish');
                        if (res.err_msg === 'get_brand_wcpay_request:ok') {
                          //  window.location.replace('/finish');
                            window.location.replace('/orderdetail/?order_id=' + order);
                        } else {
                          //  this.tooltip = 'true';
                          //  window.location.replace('/finish');
                            window.location.replace('/orderdetail/?order_id=' + order);
                        }
                     }
                 );
              }
              if (typeof WeixinJSBridge === 'undefined') {
                window.alert('请用微信付款');
                 if (document.addEventListener) {
                     document.addEventListener('WeixinJSBridgeReady', onBridgeReady, false);
                 } else if (document.attachEvent) {
                     document.attachEvent('WeixinJSBridgeReady', onBridgeReady);
                     document.attachEvent('onWeixinJSBridgeReady', onBridgeReady);
                 }
              } else {
                 onBridgeReady();
              }
            });
          }
        });
      }
    },
    components: {
      notification
    }
  };
</script>
<style lang="stylus" rel="stylesheet/stylus">
  @import "../../common/stylus/mixin.styl"
  @import "../../common/stylus/car.styl"
  /* 主要文字 黑 $main-fn
     次要文字 灰 $se-fn
     预填文字 灰 $pre-fn
     描边 灰 $border 
     背景 灰白 $bg 
     主题 红 $theme
     辅助 蓝 $assist */
    .coachconfirm-header
      height 86px
      background-color $bg-white
      width 100%
      .img1
        width 67px
        height 69px
        border 1px solid $se-fn
        border-radius 5px
        margin-top 14px
        float left
        margin-left 17px
      .coach-info
        margin-left 15px
        display inline-block
        float left
        margin-top 16px
        font-size 16px
        .star
          margin-top 35px
          font-size 15px
          color $se-fn
        .star-grey
          display inline-block
          rectangle-icon($bg-white,10px,10px)
          icon-image('star_grey')
          margin-left 1.5px
        .star-icon
          display inline-block
          rectangle-icon($bg-white,10px,10px)
          bg-image('star')
          margin-left 1.5px
    .coachconfirm-mark
      background-color $bg-white
      width 100%
      height 36px
      .mark
        height 100%
        line-height 36px
        color $se-fn
        font-size 13px
        display flex
        justify-content space-between
        margin-left 17px
        margin-right 17px
    .confirm-content
      background-color $bg-white
      min-height 40px
      width 100%
      margin-top 11px
    .title
      height 40px
      width 100%
      line-height 40px
      font-size 16px
      border-1px($border)
      .icona
        display inline-block
        float left
        margin-left 15px
        margin-top 12px
        bg-image('shedule_icon')
        square-icon(rgb(255,255,255),15px)
      .iconb
        display inline-block
        float left
        margin-left 15px
        margin-top 12px
        bg-image('detail')
        square-icon(rgb(255,255,255),15px)
      .iconc
        display inline-block
        float left
        margin-left 15px
        margin-top 12px
        bg-image('location')
        square-icon(rgb(255,255,255),15px)
      .icond
        display inline-block
        float left
        margin-left 15px
        margin-top 12px
        bg-image('discount')
        square-icon(rgb(255,255,255),15px)
      .span1
        margin-left 5px
        font-size 16px
    .confirms
      display flex
      justify-content space-between
      padding-left 38px
      padding-right 15px
      height 40px
      border-1px($border)
      color $se-fn
      line-height 40px
      font-size 15px
      .selectc
        font-size 15px
        border none
        appearance none
        background-color white
        color $se-fn
        position absolute
        right 32px
        line-height 40px
        height 100%
      .down
        display inline-block
        margin-top 13px
        icon-image('right_arrow')
        rectangle-icon(rgb(255,255,255),7px,13px)
    .confirm-flex
      display flex
      justify-content space-between
      padding-left 38px
      padding-right 27px
      height 40px
      border-1px($border)
      color $se-fn
      line-height 40px
      font-size 15px
    .price-all
      height 40px
      line-height 40px
      border-1px($border)
      .spanA
        float right
        margin-right 27px
        text-align right
        font-size 16px
        color $theme
        .spanB
          color $se-fn
          font-size 13px
    .confirm-fix
      height 55px
      width 100%
    .coachconfirm-footer
      height 47px
      position fixed
      bottom 0px
      width 100%
    .footer-confirm
      margin-left 0px
      margin-right 0px
      display flex
      justify-content space-between
      span
        display inline-block
        color $bg-white
        line-height 47px
      .span-sum
        background-color rgba(33,33,33,0.8)
        width 64%
        padding-left 15px
        color $bg-white
        font-size 15px
        span
          color $bg-white
      .span-order
        text-align center
        background-color $theme
        width 36%
        font-size 16px
</style>